import { getDocBySlug, getAllDocs, type Doc } from '../../../lib/docs'
import { notFound } from 'next/navigation'
import { MDXRemote } from 'next-mdx-remote/rsc'
import DocsLayout from '../../../components/docs-layout'

export async function generateStaticParams() {
  const docs = getAllDocs()
  return docs.map((doc: Doc) => ({ slug: doc.slug.split('/') }))
}

export default async function DocPage({ params }: { params: { slug: string[] } }) {
  const resolvedParams = await params
  const slug = resolvedParams.slug.join('/')
  try {
    const { content, meta } = getDocBySlug(slug)
    return (
      <DocsLayout>
        <article className="prose max-w-none">
          <h1>{(meta.title as string) || slug}</h1>
          <div>
            <MDXRemote source={content} />
          </div>
        </article>
      </DocsLayout>
    )
  } catch (e) {
    notFound()
  }
}